<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>采购报表图形</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/exporting.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/highcharts-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		
		//加载所有的计划 
	     $.ajax({
	     	url:'${pageContext.request.contextPath }/PlanDetailed/supperAdd.do',
	     	type:"POST",
	     	dataType:'json',
	     	success:function (result) { 
	     		
	     		for (var i = 0; i < result.length; i++) {
	     			$("#txt_search_supper").append("<option value="+result[i].supplierid+">"+result[i].suppliername+"</option>");
	     		}
	     	}
	     });
		
	}); 
</script>
</head>
<body>


<div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_statu">供应商</label> 
                        <div class="col-sm-2">
                        	<!-- <input class="form_datetime form-control" type="text" id="arrtimeUpdat" name="arrtime"> -->
                        	<select class="form-control" id="txt_search_supper">
				    			<option>请选择供应商</option>
				    			<!-- <option>北京盛达融元科技有限公司1</option>
				    			<option>北京盛达融元科技有限公司2</option> -->
			    		</select>
                        </div>
                       <!--  <label class="control-label col-sm-1" for="txt_search_statu">条件</label> 
                        <div class="col-sm-2">
                            <input type="text"  class="form-control" id="txt_search_statu">
                        </div> -->
                        <div class="col-sm-1" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary" onclick="show()">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

      
        
        <div id="container" style="min-width:400px;height:400px"></div>
    </div>



<script type="text/javascript">
var data = null; // 定义全局变量
$(function () {
	
	requestData();
	
    $('#container').highcharts({
        chart: {
            type: 'column'
            
        },
        title: {
            text: '供应商月供货量对比'
        },
        subtitle: {
            text: '数据来源: 北京盛达融元科技有限公司'
        },
        xAxis: {
            categories: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '数量 '
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: data,
    });
    
});
function requestData() {
	
	$.ajax({
		type:'post',
		async: false,
		url:'${pageContext.request.contextPath }/datas/data.json',
		success:function(point) {
			data =  point;
			/* var series = chart.series[0],
		        shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

		      // 新增点操作
		      //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
		      chart.series[0].addPoint(point, true, shift);

		      // 一秒后继续调用本函数
		      setTimeout(requestData, 1000);  */
		 },
		cache: false
	});
}
</script>
</body>
</html>